<template>
  <div class="views" id="views" @touchmove.prevent @mousewheel.prevent>
    <div id="container" class="container"></div>
  </div>
</template>

<script>
import * as THREE from 'three/build/three.module'
import {App} from '@/assets/App/App'
import { MqttUtil } from '@/utils/MqttUtil'

const threeApp = new App()
export default {
  props: ['home'],
  data() {
    return {
      params: {
        methods: {
          animation: false,
          renderer: true,
          light: true,
          controls: true,
          TWEEN: true,
          postprocessing: true,
          statement: true
        },
        events: {
          windowResize: true
        },
        params: {
          containerId: 'container',
          renderer: [
            'WebGLRenderer'
          ],
          controls: [
            'OrbitControls'
          ],
          rendererParams: {
            antialias: true
          },
          postprocessing: [
            'OutlinePass'
          ]
        }
      },
      topics: {
        pcj: `${this.$route.path}_position-controls-json`,
        obj: `${this.$route.path}_outline-objName-json`,
        ptj: `${this.$route.path}_path-tierName-json`
      }
    }
  },
  mounted() {
    this.home.loading()
    /**
     * 初始化场景
     */
    threeApp.init(this.params, (scene, camera, renderer) => {
      // 重设相机初始位置
      camera.position.set(-16000, 4800, 16000)

      threeApp.orbitControls.autoRotate = false
    })

    threeApp.addModel({
      url: 'static/model/fbx/torch/jxl/floor1.FBX',
      type: 'fbx',
      name: 'floor1'
    }, (obj) => {
      obj.position.set(0, 0, 0)
      obj.scale.set(0.05, 0.05, 0.05)
      this.home.loadOver()
      // 相机飞行
      threeApp.flyTo({
        position: [8000, 2400, 0],
        controls: [0, 0, 0],
        duration: 3000
      })
    }, (progress) => {
      progress = parseInt((progress.loaded / progress.total) * 100)
      this.home.loadProgress(progress)
    })

    threeApp.animate(() => {
      if (this.home.mqttForm.status === 'pub' && this.mqtt) {
        const controls = [threeApp.orbitControls.target.x, threeApp.orbitControls.target.y, threeApp.orbitControls.target.z]
        const position = [threeApp.camera.position.x, threeApp.camera.position.y, threeApp.camera.position.z]

        const message = JSON.stringify({
          position,
          controls
        })
        this.mqtt.pubTopic(this.topics.pcj, message)
      }
    })
    this.mqttInit()
  },
  methods: {
    mqttInit () {
      if (this.home.mqttForm.status === 'sub') {
        if (this.mqtt) this.mqtt.client.end()
        this.mqtt = new MqttUtil(`mqtt://${this.home.mqttForm.url}`)
        this.mqtt.setSubTopic(this.topics.pcj)
        this.mqtt.setSubTopic(this.topics.obj)
        this.mqtt.setSubTopic(this.topics.ptj)
        this.mqttSubInit()
        this.mqtt.subTopic(this.mqttSub)
      } else if (this.home.mqttForm.status === 'pub') {
        if (this.mqtt) this.mqtt.client.end()
        this.mqtt = new MqttUtil(`mqtt://${this.home.mqttForm.url}`)
      } else if (this.home.mqttForm.status === 'alone') {
        if (this.mqtt) this.mqtt.client.end()
        this.mqttSubDestroy()
      }
    },
    mqttSubInit () {
      threeApp.orbitControls.enabled = false
    },
    mqttSub (topic, message) {
      message = JSON.parse(message.toString())
      if (topic === this.topics.pcj && message) {
        threeApp.camera.position.set(...message.position)
        threeApp.camera.lookAt(...message.controls)
      } else if (topic === this.topics.obj && message) {
        var objList = []
        if (message.objName !== 'null') objList = [threeApp.scene.getObjectByName(message.objName)]
        threeApp.outlinePass.selectedObjects = objList
      } else if (topic === this.topics.ptj && message) {
        this.$router.push(message.path)
        this.home.tierChange(message.tierName)
      }
    },
    mqttSubDestroy () {
      threeApp.orbitControls.enabled = true
    },
    mqttPubOutlineObjName (objName) {
      const message = JSON.stringify({
        objName
      })
      this.mqtt.pubTopic(this.topics.obj, message)
    },
    mqttPubPathTierName (path, tierName) {
      const message = JSON.stringify({
        path,
        tierName
      })
      this.mqtt.pubTopic(this.topics.ptj, message)
    }
  },
  beforeDestroy () {
    if (this.mqtt) this.mqtt.client.end()
  }
}
</script>

<style scoped>
.views {
  height: 100%;
  width: 100%;
}

.container {
  height: 100%;
  width: 100%;
}
</style>
